<%--
  Created by IntelliJ IDEA.
  User: 林淮
  Date: 2024/12/4
  Time: 下午2:59
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<script src="js/jquery3.6.4.js"></script>
<script>
    $(function () {
        $("#getBtn").click(function () {
            //异步处理
            $.ajax({
                url: "myAjax",//请求地址
                type: "get",//请求类型
                data: {    //请求参数对象
                    name: "永恩",
                    age: 21
                },
                dataType: "text", //预期响应内容类型
                success: function (data) {  //响应成功后处理函数
                    console.log("响应的数据为:" + data)
                },
                beforeSend() {
                    console.log("发送钱准备完毕");
                },
                error(err) {
                    console.log("错误处理中")
                },
                complete() {
                    console.log("最终的处理")
                }
            })
        })
        $("#postBtn").click(function () {
            //异步处理
            $.ajax({
                url: "myAjax",//请求地址
                type: "post",//请求类型
                data: {    //请求参数对象
                    name: "永恩",
                    age: 21
                },
                dataType: "text", //预期响应内容类型
                success: function (data) {  //响应成功后处理函数
                    console.log("响应的数据为:" + data)
                }
            })
        })
    })
</script>
<body>
<button id="getBtn">get测试</button>
<button id="postBtn">post测试</button>
<hr/>
<label>姓名:</label>
<input type="text" id="name">
<br>
<label>年龄:</label>
<input type="number" id="age">
<br>
<button type="button" id="testBtm">测试添加</button>
<div>
    name:<span class="name"></span><br>
    age:<span class="age"></span><br>
    knife:<span class="knife">是</span><br>
    address:<span class="address"></span>
</div>
<script>
    $(function () {
        $("#testBtm").click(function () {
            let name = $("#name").val();
            let age = $("#age").val();
            $.ajax({
                url: "ajaxJson",
                type: "post",
                data: {
                    name: name,
                    age: age,
                },
                dataType: "json",
                success: function (data) {
                    console.log("响应的数据为:" + data)
                    $(".name").text(data.name);
                    $(".age").text(data.age);
                    if (data.knife) {
                        $(".knife").text("是");
                    } else {
                        $(".knife").text("否");
                    }
                    $(".address").text(data.address);
                }
            })
        })
    })
</script>
</body>
</html>
